<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>沃尔玛</title>
    <!-- 样式 -->
    <link rel="stylesheet" href="./css/layui.css" />
    <script src="./layui.js"></script>
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./css/carousel.css" />
    <link rel="stylesheet" href="./css/bottom.css" />
    <script src="./js/carousel.js"></script>
  </head>
  <body>
    <div id="header">
      <a href="./index.html"><img id="barIcon" src="./img/bar/barIcon.jpg" alt="barIcon" /></a>
      <div id="barRight">
        <a href="./login.html"><img id="account" src="./img/bar/account.jpg" alt="account" /></a>
        <img id="love" src="./img/bar/love.jpg" alt="love" />
        <a href="./shoppingCar.html"><img id="car" src="./img/bar/car.jpg" alt="car" /></a>
      </div>
    </div>

    <!-- 轮播 -->
    <div class="layui-carousel" id="carousel">
      <div carousel-item>
        <div><img src="./img/pov/pov8.jpg" /></div>
        <div><img src="./img/pov/pov1.jpg" /></div>
        <div><img src="./img/pov/pov6.jpg" /></div>
        <div><img src="./img/pov/pov7.jpg" /></div>
        <div><img src="./img/pov/pov9.jpg" /></div>
      </div>
    </div>

    <!-- 盒子区域 -->
    <div id="boxarea">
      <!-- 内容一 -->
      <div id="content01">
        <!-- 标题 -->
        <p class="info01">Deals for Days</p>
        <!-- 商品列表 -->
        <ul id="prolist">
          <li>
            <img class="picList" src="img/01.jpg" />
            <p class="pList">Up to 30% off home</p>
          </li>
          <li>
            <img class="picList" src="img/02.jpg" />
            <p class="pList">40% of select tech</p>
          </li>
          <li>
            <img class="picList" src="img/03.jpg" />
            <p class="pList">57% of select toys</p>
          </li>
          <li>
            <img class="picList" src="img/04.jpg" />
            <p class="pList">Up to 60% off fashion</p>
          </li>
        </ul>
      </div>

      <!-- card -->
      <div id="content-mid">
        <div id="total-part">
          <div id="part1">
            <p class="info04"><strong>Pickup or delivery</strong></p>
            <img id="pic01" src="img/27.jpg" />
            <p class="info05"><strong>Groceries & even more</strong></p>
            <p class="info06">1919 Davis St,San Leandro</p>
            <button class="but01" type="button"><strong>&nbsp;Start your order&nbsp;</strong></button>
          </div>
          <div id="part2">
            <p class="info04"><strong>Earn 5% cash back</strong></p>
            <img id="pic02" src="img/26.png" />
            <p class="info05"><strong>Earn 5% cash back</strong></p>
            <p class="info06">every day on walmart.com</p>
            <button class="but02" type="button"><strong>&nbsp;Learn how&nbsp;</strong></button>
          </div>
          <div id="part3">
            <p class="info04"><strong>New Walmart+ benefit</strong></p>
            <img id="pic03" src="img/28.jpg" />
            <p class="info05"><strong>Rx for less</strong></p>
            <p class="info06">Save big on select prescriptions. Restrictions apply.</p>
            <button class="but02" type="button"><strong>&nbsp;Learn more&nbsp;</strong></button>
          </div>
        </div>
      </div>

      <!-- 内容二 -->
      <div id="content02">
        <!-- 标题 -->
        <p class="info01">Shop by category</p>
        <!-- 商品列表 -->
        <ul id="prolist">
          <li>
            <img class="picList02" src="img/09.jpeg" />
            <p class="info02">Women's clothing</p>
          </li>
          <li>
            <label for="a">
              <a href="./electronics.html">
                <img class="picList02" id="pic08-1" src="./img/08.jpeg" />
                <p class="info02">Electronics</p>
              </a>
            </label>
          </li>
          <li>
            <img class="picList02" src="./img/17.jpeg" />
            <p class="info02">Cloth bags</p>
          </li>
          <li>
            <img class="picList02" src="img/12.jpeg" />
            <p class="info02">Colored cup</p>
          </li>
          <li>
            <img class="picList02" src="img/07.jpeg" />
            <p class="info02">Patlo&garden</p>
          </li>
        </ul>
        <!-- 商品列表 -->
        <ul id="prolist">
          <li>
            <img class="picList02" src="img/14.jpeg" />
            <p class="info02">Decorative furniture</p>
          </li>
          <li>
            <img class="picList02" src="./img/13.jpeg" />
            <p class="info02">Sofa chair</p>
          </li>
          <li>
            <img class="picList02" src="img/10.jpeg" />
            <p class="info02">Rag for cleaning</p>
          </li>
          <li>
            <img class="picList02" src="img/19.jpeg" />
            <p class="info02">Sunglasses</p>
          </li>
          <li>
            <img class="picList02" src="img/11.jpeg" />
            <p class="info02">Tableware</p>
          </li>
        </ul>
      </div>
    </div>
    <!-- 内容三 -->
    <div id="content03">
      <!-- 标题 -->
      <p class="info01">For you more possibility</p>
      <!-- 商品列表 -->
      <ul id="prolist">
        <li>
          <!-- part1 -->
          <div class="det01">
            <img src="img/20.jpeg" />
            <p class="info03">Hat class</p>
            <img src="img/23.jpeg" />
            <p class="info03">Fruits</p>
            <img src="img/21.jpeg" />
            <p class="info03">Shoes</p>
          </div>
        </li>
        <li>
          <!-- part2 -->
          <div class="det01">
            <br />
            <br />
            <br />
            <br />
            <br />
            <img src="img/05.jpeg" />
            <br />
            <br />
            <br />
            <br />
            <p class="info03">Coffee maker</p>
          </div>
        </li>
      </ul>
    </div>

    <div id="bottom">
      <div class="b">
        <span class="bh">Walmart Services</span>
        <ul>
          <br />
          <li class="b-text"><a href="#">Walmart+</a></li>
          <li class="b-text"><a href="#">Grocery Pickup & Delivery</a></li>
          <li class="b-text"><a href="#">MoneyCenter</a></li>
          <li class="b-text"><a href="#">Walmart Credit Card</a></li>
          <li class="b-text"><a href="#">Walmart Pay</a></li>
          <li class="b-text"><a href="#">Weekly Ad</a></li>
          <li class="b-text"><a href="#">Other Services</a></li>
        </ul>
      </div>
      <div class="b">
        <span class="bh">Get to Know Us</span>
        <ul>
          <br />
          <li class="b-text"><a href="#">Our Company</a></li>
          <li class="b-text"><a href="#">Store Directory</a></li>
          <li class="b-text"><a href="#">Digital Museum</a></li>
          <li class="b-text"><a href="#">Our Suppliers</a></li>
          <li class="b-text"><a href="#">Sell on Walmart.com</a></li>
          <li class="b-text"><a href="#">Advertise With Us</a></li>
          <li class="b-text"><a href="#">Careers</a></li>
        </ul>
      </div>
      <div class="b">
        <span class="bh">Walmart.com</span>
        <ul>
          <br />
          <li class="b-text"><a href="#">Walmart Labs</a></li>
          <li class="b-text"><a href="#">Our Ads</a></li>
          <li class="b-text"><a href="#">Terms of Use</a></li>
          <li class="b-text"><a href="#">Privacy & Security</a></li>
          <li class="b-text"><a href="#">CA Privacy Rights</a></li>
          <li class="b-text"><a href="#">Do Not Sell My Personal Information</a></li>
          <li class="b-text"><a href="#">Request My Personal Information</a></li>
          <li class="b-text"><a href="#">Tax Exempt Program</a></li>
          <li class="b-text"><a href="#">California Supply Chain Security Act</a></li>
        </ul>
      </div>

      <div class="b">
        <span class="bh">Customer Service</span>
        <ul>
          <br />
          <li class="b-text"><a href="#">Help Center</a></li>
          <li class="b-text"><a href="#">Returns</a></li>
          <li class="b-text"><a href="#">Product Recalls</a></li>
          <li class="b-text"><a href="#">Accessibility</a></li>
          <li class="b-text"><a href="#">Contact Us</a></li>
          <li class="b-text"><a href="#">Store Pickup</a></li>
        </ul>
      </div>

      <div class="b">
        <span class="bh">In The Spotlight</span>
        <ul>
          <br />
          <li class="b-text"><a href="#">Portable Air Conditioners</a></li>
          <li class="b-text"><a href="#">PS4</a></li>
          <li class="b-text"><a href="#">Trampoline</a></li>
          <li class="b-text"><a href="#">Skateboard</a></li>
          <li class="b-text"><a href="#">Outdoor Furniture</a></li>
          <li class="b-text"><a href="#">Nintendo Switch Lite</a></li>
        </ul>
      </div>
      <hr />
      <div id="copy">
        <small class="copy" style="float: left">© 2021 Walmart. All Rights Reserved.</small>
        <small class="copy" style="float: right">To ensure we are able to help you as best we can, please include your reference number: ZICHWEIG9F</small>
      </div>
    </div>
  </body>
</html>
